<template>
  <div>
    <CommonDialog class="pagemaker-mapping">
      <div slot="title">{{ title }}</div>
      <section slot="content">
        <el-table
            :data="myList"
            style="width: 90%;margin: 0 auto;"
        >
          <el-table-column
              label="名称"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" disabled placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column
              label="原标识"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.code" disabled placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column
              label="新标识"
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.value"  @input="inputChange($event)" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table>
      </section>
      <section slot="footer">
        <el-button size="small" @click="$emit('close')">取消</el-button>
        <el-button :loading="loading" size="small" type="primary" @click="handleComit">确定</el-button>
      </section>
    </CommonDialog>
  </div>
</template>
<script>
import CommonDialog from '@/components/Dialog'
export default {
  name: 'PagemakerMapping',
  components: {CommonDialog },
  props: {
    title: {
      type: String,
      default: ''
    },
    fn: {
      type: Function,
      default: () => {
      }
    },
    upValue: {
      type: Array,
      default: ()=>{return []}
    }
  },
  data() {
    return {
      loading:false,
      myList:[]
    }
  },
  async created() {
    this.myList=this.upValue
  },
  methods: {
    handleComit(){
      this.fn && this.fn(this.myList)
      this.$emit('close')
    },
    inputChange(e) {
      this.$forceUpdate()
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/var.scss';
@import '@/styles/utility/shadow.scss';

.pagemaker-mapping {
  /deep/ {
    .content {
      height: 450px;
      padding: 20px;
      > section {
        display: flex;
        height: 100%;
        overflow-y: auto;
      }
    }
  }
}
</style>
